<template>
  <div class="message-detail">
    <!-- 查看年度计划对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="openDataScope"
      width="700px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-descriptions
        class="margin-top"
        :column="1"
        border
        :labelStyle="labelStyle"
      >
        <el-descriptions-item>
          <template slot="label"> 计划名称 </template>
          {{ planData.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 年份 </template>
          {{ planData.year }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 开放起始时间 </template>
          {{ planData.startTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 开放截止时间 </template>
          {{ planData.endTime }}
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDataScope">取 消</el-button>
        <el-button type="primary" @click="handDeclare" :disabled="isEdit">去申报</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getListingDetail } from "@/api/manage/annualPlan";
export default {
  name: "messageDetail",
  props: {
    dialogForm: {
      type: Object,
      default() {
        return {};
      },
    },
    title: {
      type: String,
      default: "",
    },
    // isEdit: {
    //   type: Boolean,
    //   default: true,
    // },
  },
  data() {
    return {
      openDataScope: false,
      labelStyle: {
        width: "180px",
      },
      planId: undefined,
      planData: {},
      isEdit:undefined,  //去申报按钮是否可操作
    };
  },
  watch: {
    openDataScope(val) {
      this.planId = this.dialogForm.planId;
      if(this.dialogForm.msgStatus == 1){
        this.isEdit = true
      }else{
        this.isEdit = false
      }
      if (val == true && this.planId && this.planId != null) {
        this.getPlanData();
      }
    },
  },
  methods: {
    /** 获取年度计划详情 */
    getPlanData() {
      getListingDetail(this.planId).then((res) => {
        this.planData = res;
      });
    },
    cancelDataScope() {
      this.openDataScope = false;
      this.$emit("handleSurnBtn");
    },
    /**申报按钮操作 */
    handDeclare() {
      this.$router.push({
        path: "/projectCompany/annualReturn",
        query: {
          planId: this.dialogForm.planId,
          planName: this.planData.name,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 弹出窗样式 */
.el-dialog__wrapper {
  ::v-deep .dialog-box {
    .download {
      color: blue;
    }
    .el-dialog__body {
      padding: 24px 69px 24px 69px;
      border-top: 1px solid #ebecef;
      border-bottom: 1px solid #ebecef;
      label {
        font-weight: 400 !important;
      }
    }
    .el-dialog__footer {
      padding: 16px 20px;
    }
    .el-dialog__headerbtn {
      background: url("../../../assets/images/icon_dialog_close.png");
      background-size: 100%;
      width: 16px;
      height: 16px;
      .el-dialog__close {
        visibility: hidden;
      }
    }
    /* el-descriptions-item 文字居中 */
    // .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
    //   text-align: center;
    // }
  }
}
</style>
